<template>
  <div class="home-page">
    <!-- 顶部搜索栏 -->
    <div class="top-bar">
      <div class="city">{{ t('home.city') }}</div>
      <van-search v-model="searchValue" shape="round" background="#eaf6ff" :placeholder="t('home.searchPlaceholder')"
        show-action @search="onSearch">
        <template #action>
          <span class="search-btn" @click="onSearch">{{ t('home.search') }}</span>
        </template>
      </van-search>
      <van-icon name="chat-o" class="msg-btn" />
    </div>

    <!-- 九宫格功能区 -->
    <van-grid :column-num="5" :border="false" class="main-grid">
      <van-grid-item v-for="item in gridList" :key="item.text" :text="t(item.text)" @click="onGridItemClick(item)">
        <template #icon>
          <div class="icon-circle" :style="{ background: item.bg }">
            <van-icon :name="item.icon" class="main-icon" />
          </div>
        </template>
      </van-grid-item>
    </van-grid>

    <!-- 医保保障卡片 -->
    <div class="insurance-card">
      <div class="card-header">
        <span class="title">{{ t('home.insuranceCardTitle') }}</span>
        <span class="id">{{ t('home.insuranceCardId') }}</span>
      </div>
      <div class="card-body">
        <div class="basic-insurance">
          <span class="label">{{ t('home.insuranceBase') }}</span>
          <span class="status">{{ t('home.insuranceStatus') }} <span class="tag">{{ t('home.insuranceTag')
          }}</span></span>
        </div>
        <div class="desc">{{ t('home.insuranceDesc') }}</div>
        <van-button size="small" type="warning" class="activate-btn">{{ t('home.activate') }}</van-button>
      </div>
      <div class="card-footer">
        <van-button size="small" class="footer-btn">{{ t('home.dental') }}</van-button>
        <van-button size="small" class="footer-btn">{{ t('home.handle') }}</van-button>
      </div>
    </div>

    <!-- 推荐区块 -->
    <div class="recommend-section">
      <div class="section-title">{{ t('home.recommend') }}</div>
      <div class="gift-card">
        <van-icon name="gift-o" class="gift-icon" />
        <div class="gift-info">
          <div class="gift-title">{{ t('home.giftTitle') }}</div>
          <div class="gift-desc">{{ t('home.giftDesc') }}</div>
        </div>
        <van-button size="small" class="use-btn">{{ t('home.use') }}</van-button>
      </div>
      <div class="hot-drug-card">
        <div class="hot-title">{{ t('home.hotDrugTitle') }}</div>
        <div class="hot-desc">{{ t('home.hotDrugDesc') }}</div>
        <van-button size="small" type="warning" class="buy-btn">{{ t('home.buy') }}</van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const searchValue = ref('')

const gridList = [
  { icon: 'scan', text: 'home.grid.code', bg: '#eaf6ff' },
  { icon: 'notes-o', text: 'home.grid.register', bg: '#eaf6ff' },
  { icon: 'user-o', text: 'home.grid.consult', bg: '#eaf6ff' },
  { icon: 'shopping-cart-o', text: 'home.grid.buy', bg: '#eaf6ff' },
  { icon: 'shield-o', text: 'home.grid.protect', bg: '#eaf6ff' },
  { icon: 'passed', text: 'home.grid.check', bg: '#eaf6ff' },
  { icon: 'smile-o', text: 'home.grid.dental', bg: '#eaf6ff' },
  { icon: 'flower-o', text: 'home.grid.tcm', bg: '#eaf6ff' },
  { icon: 'like-o', text: 'home.grid.island', bg: '#eaf6ff' },
  { icon: 'apps-o', text: 'home.grid.all', bg: '#eaf6ff' }
]

const onSearch = () => {
  // 搜索逻辑
}

const onGridItemClick = (item: any) => {
  // 这里可以做页面跳转或弹窗
  // 例如 if (item.text === 'home.grid.register') { router.push('/appointment') }
}
</script>

<style lang="scss" scoped>
.home-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #eaf6ff 0%, #f7f8fa 100%);
  padding-bottom: 16px;
}

.top-bar {
  display: flex;
  align-items: center;
  padding: 12px 12px 0 12px;
  background: #eaf6ff;

  .city {
    font-size: 16px;
    color: #3b8cff;
    font-weight: bold;
    margin-right: 8px;
  }

  .msg-btn {
    font-size: 22px;
    color: #3b8cff;
    margin-left: 8px;
  }

  .search-btn {
    color: #3b8cff;
    font-size: 15px;
    margin-left: 4px;
  }
}

.main-grid {
  margin: 8px 0 0 0;
  background: transparent;

  .van-grid-item__content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    margin: 4px;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px auto;
  }

  .main-icon {
    font-size: 26px;
    color: #3b8cff;
  }

  .van-grid-item__text {
    font-size: 14px;
    color: #333;
    margin-top: 2px;
  }
}

.insurance-card {
  background: linear-gradient(90deg, #3b8cff 0%, #6ec6ff 100%);
  border-radius: 16px;
  margin: 16px 12px 0 12px;
  padding: 16px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 140, 255, 0.08);

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    margin-bottom: 8px;

    .title {
      font-weight: bold;
    }

    .id {
      font-size: 13px;
      opacity: 0.9;
    }
  }

  .card-body {
    background: #fff;
    color: #333;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;

    .basic-insurance {
      display: flex;
      align-items: center;
      font-size: 15px;
      margin-bottom: 4px;

      .label {
        font-weight: bold;
        margin-right: 8px;
      }

      .status {
        color: #ff9900;
        margin-right: 8px;
      }

      .tag {
        background: #ffe6b0;
        color: #ff9900;
        border-radius: 8px;
        padding: 2px 6px;
        font-size: 12px;
        margin-left: 4px;
      }
    }

    .desc {
      font-size: 13px;
      color: #888;
      margin-bottom: 8px;
    }

    .activate-btn {
      background: linear-gradient(90deg, #ffb347 0%, #ffcc80 100%);
      color: #fff;
      border: none;
      border-radius: 16px;
      font-size: 14px;
      padding: 0 16px;
      float: right;
    }
  }

  .card-footer {
    display: flex;
    gap: 12px;

    .footer-btn {
      background: #fff;
      color: #3b8cff;
      border: none;
      border-radius: 16px;
      font-size: 14px;
      padding: 0 16px;
    }
  }
}

.recommend-section {
  margin: 20px 12px 0 12px;

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
  }

  .gift-card {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    padding: 12px;
    margin-bottom: 12px;

    .gift-icon {
      font-size: 32px;
      color: #3b8cff;
      margin-right: 12px;
    }

    .gift-info {
      flex: 1;

      .gift-title {
        font-size: 15px;
        font-weight: bold;
        color: #333;
      }

      .gift-desc {
        font-size: 13px;
        color: #888;
      }
    }

    .use-btn {
      background: #eaf6ff;
      color: #3b8cff;
      border: none;
      border-radius: 16px;
      font-size: 14px;
      padding: 0 12px;
    }
  }

  .hot-drug-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .hot-title {
      font-size: 15px;
      font-weight: bold;
      color: #ff6600;
    }

    .hot-desc {
      font-size: 13px;
      color: #888;
      margin-right: 8px;
    }

    .buy-btn {
      background: linear-gradient(90deg, #ffb347 0%, #ffcc80 100%);
      color: #fff;
      border: none;
      border-radius: 16px;
      font-size: 14px;
      padding: 0 12px;
    }
  }
}
</style>